<template>
  <blog-body>
    <template v-slot:header>
      <blog-navigation-bar>
        <view style="color: #fff;display: flex;align-items: center;gap: 3px;">
          <image src="@/static/add.png" style="width: 16px;height: 16px;"/>
          自定义下拉刷新（ViewPage + 禁止滑动）
        </view>
        <template v-slot:attach>
          <blog-view-tabs :current="current" @update:current="val=>current=val" :tabs="tabs"/>
        </template>
      </blog-navigation-bar>
    </template>
    <template>
      <blog-smart-refresh @onRefreshListener="onRefresh">
        <template v-slot:header>
          <CustomHeader/>
        </template>
        <blog-view-page :tabs="tabs" :current="current" @update:current="val=>current=val">
          <template #page="{index}">
            <view style="height: 100%;">
              <!-- #ifndef MP-WEIXIN -->
              <PlaceOne v-if="index===0" :title="title"/>
              <PlaceTwo v-else-if="index===1" :title="title"/>
              <PlaceThree v-else-if="index===2" :title="title"/>
              <PlaceFour v-else :title="title"/>
              <!-- #endif -->
              <!-- #ifdef MP-WEIXIN -->
              <view style="display: flex;align-items: center;justify-content: center;height: 100%;">
                小程序平台不支持函数穿透{{ index }}
              </view>
              <!-- #endif -->
            </view>
          </template>
        </blog-view-page>
      </blog-smart-refresh>
    </template>
  </blog-body>
</template>

<script>
import CustomHeader from "@/pages/customHeader/CustomHeader.vue";
import PlaceOne from "@/pages/place/page/placeOne.vue";
import PlaceTwo from "@/pages/place/page/placeTwo.vue";
import PlaceFour from "@/pages/place/page/placeFour.vue";
import PlaceThree from "@/pages/place/page/placeThree.vue";

export default {
  components: {PlaceThree, PlaceFour, PlaceTwo, PlaceOne, CustomHeader},
  data() {
    return {
      tabs: [{name: "页1", attach: "(1)"}, {name: "页2", attach: "(2)"}, {name: "页3", attach: "(3)"}, {
        name: "页4",
        attach: "(4)"
      }],
      current: 0,
      title: null
    }
  },
  methods: {
    onRefresh(onCall) {
      setTimeout(() => {
        onCall(true)
        this.title = "数据刷新完成，此处显示内容，公用刷新头"
      }, 1000)
    }
  }
}
</script>

<style>

.content {
  height: 100%;
  font-size: 16px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
